<template>
    <el-tabs model-value="cms">
        <el-tab-pane label="内容设置" name="cms">
            <el-form label-width="90px" class="cms_box">
                <el-form-item label="数据源">
                    <mi-radio v-model="component.info.config.source"
                              :options="[{id:'auto', title:'自动获取'}, {id:'custom', title:'自定义'}]" />
                </el-form-item>
                <template v-if="component.info.config.source == 'auto'">
                    <el-form-item label="数据类型">
                        <el-form-item>
                            <mi-radio v-model="component.info.config.source_type" :options="[{id:'goods_cate',title:'商品分类'},{id:'goods_tag',title:'商品标签'}]" />
                        </el-form-item>
                        <el-form-item>
                            <goods-cate-select v-model="component.info.config.source_id" v-if="component.info.config.source_type == 'goods_cate'" @change="sourceChange" />
                            <goods-tag-select v-model="component.info.config.source_id" v-if="component.info.config.source_type == 'goods_tag'" @change="sourceChange" />
                        </el-form-item>
                    </el-form-item>

                    <el-form-item label="数量">
                        <mi-input-number v-model="component.info.config.num" />
                    </el-form-item>
                </template>
                <template v-else-if="component.info.config.source =='custom'">
                    <mi-panel
                              class="mb10"
                              v-for="(vo,i) in component.info.list" :key="i"
                              @close="removeLi(i)"
                    >
                        <div class="d_flex">
<!--                            <mi-up-image v-model="vo.image" size="76px" class="mr10" />-->
                            <div>
                                <div class="d_flex flex_ai_c mb10">
                                    <label>商品</label>
                                    <goods-select v-model="vo.id" @change="goodsChange($event, i)" />
                                </div>
                            </div>
                        </div>
                    </mi-panel>
                    <div class="d_flex flex_jc_c">
                        <el-button type="primary" @click="addLi">添加元素</el-button>
                    </div>
                </template>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="style">
            <el-form label-width="90px" class="style_box">
                <el-form-item label="每行数量">
                    <mi-radio v-model="component.info.class.col_num"
                              :options="[{id:'col_1', title:'单列'}, {id:'col_2', title:'双列'}, {id:'col_3', title:'三列'}]" />
                </el-form-item>
                <el-form-item label="图片样式">
                    <mi-radio v-model="component.info.class.radius"
                              :options="[{id:'right', title:'直角'}, {id:'fillet', title:'圆角'}]" />
                </el-form-item>
                <el-form-item label="下边距">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-slider v-model="component.info.style.margin_bottom" />
                        </el-col>
                        <el-col :span="8">
                            <mi-input-number v-model="component.info.style.margin_bottom" controls-position="right" controls size="small" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="左右边距">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-slider v-model="component.info.style.margin_x" />
                        </el-col>
                        <el-col :span="8">
                            <mi-input-number v-model="component.info.style.margin_x" controls-position="right" controls size="small" />
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">

import {inject, watch} from "vue";
import {goodsLi, gridLi} from "@/views/site/diy/diy";
import GoodsCateSelect from "@/views/store/components/GoodsCateSelect.vue";
import {getGoodsList, getUniGoodsLimit} from "@/api/store/goods";
import GoodsSelect from "@/views/store/components/GoodsSelect.vue";
import GoodsTagSelect from "@/views/store/components/GoodsTagSelect.vue";

const component : any = inject("selectedComponent")
if(component.info.config.length == 0){
    component.info.config = {
        num: 3,
    }
}

const addLi = () => {
    component.info.list.push({...gridLi})
}
const removeLi = (index:number) => {
    component.info.list.splice(index,1)
}

const goodsChange = (row:any, index:number) => {
    component.info.list[index] = {...row}
}

const sourceChange = (id:number, index:number) => {
    const config = component.info.config
    const where : Record<string, any>= {
        limit: config.num
    }
    if (config.source_type == 'goods_cate'){
        where.cate_id = id
    }else if (config.source_type == 'goods_tag'){
        where.tag_id = id
    }

    // 获取产品列表
    getGoodsList(where).then(({items}:{items:any[]}) => {

        let list = []
        if (items.length == 0){
            list = [{...goodsLi}, {...goodsLi}]
        }else{
            list = items
        }

        component.info.list = list
    })
}

</script>

<style scoped lang="scss">
.cms_box{
    padding: 10px;
    label{
        width: 32px;
    }
}
.style_box{
    padding: 10px;
    .el-input-number{
        width: 100% !important;
    }
    .el-row{
        width: 100%;
    }
}
</style>
